<template>
  <Layout :gradient = "true">
    <Header>
      <Close @click="handleBack" slot='left' />
    </Header>
    <Content :flex="true">
      <div class="panel" @click="handleProfile">
        <div class="panel-left">
          <div class="avatar"><img src="http://img0.imgtn.bdimg.com/it/u=3915474924,3677139292&fm=26&gp=0.jpg" /></div>
        </div>
        <div class="panel-content">
          <h2>刘看山</h2>
          <dt>
            <dl><Icon name = 'phone' /></dl>
            <dd>12345678900</dd>
          </dt>
          <dt>
            <dl><Icon name = 'location' /></dl>
            <dd>中国上海市虹桥区</dd>
          </dt>
        </div>
        <div class="panel-right">
          <div class="more">编辑<Icon name = 'arrow' /></div>
        </div>
      </div>
      <div class="user-content">
        <CellGroup>
          <Cell to = '/i/meeting' title="查看已报名会议" value="10" icon="description" is-link />
          <Cell to = '/i/collect' title="我的收藏" icon="like" is-link />
        </CellGroup>
        <CellGroup>
          <Cell to = '/i/password' title="修改密码" icon="setting" is-link />
        </CellGroup>
        <Collapse v-model = "contact">
          <CollapseItem name = '1'>
            <div class="contact-title" slot='title'><Icon name = 'phone' />联系我们</div>
            <div class="contact">
              <p>电话：123645682</p>
              <p>地址：联系地址</p>
              <p>邮箱：1123456@163.com</p>
            </div>
          </CollapseItem>
        </Collapse>
      </div>
    </Content>
  </Layout>
</template>

<script>

import Layout from '@/component/layout/index.js'
import Close from '@/component/close/index.vue'
import { Cell, CellGroup, Icon, Field, Collapse, CollapseItem  } from 'vant'

const {
  Header,
  Content,
  Footer
} = Layout

export default {

  name: 'index',

  data () {
    return {
      contact: []
    }
  },

  methods: {
    handleBack: function (e) {
      this.$router.go(-1)
    },
    handleProfile: function () {
      this.$router.push('/i/profile')
    }
  },

  components: {
    Layout,
    Header,
    Content,
    Footer,
    Close,
    Icon,
    Field,
    Cell,
    CellGroup,
    Collapse,
    CollapseItem,
  },
}

</script>

<style lang="less" scoped>

.panel {
  padding: 20px;
  display: flex;
  flex-shrink: 0;

  &-content {
    flex-grow: 1;
    // padding-top: 5px;

    h2 {
      font-size: 19px;
      margin: 0 0 10px;
      line-height: 1.15;
    }

    dt {
      margin: 0 0 10px;
      display: flex;
      font-size: 13px;

      :last-child {
        margin-bottom: 0;
      }

      dl {
        flex-shrink: 0;
        width: 20px;

        i {
          position: relative;
          top: 1px;
        }
      }

      dd {
        flex-grow: 1;
      }
    }
  }

  &-left {
    flex-shrink: 0;
    margin-right: 20px;
    min-width: 0;
    padding-top: 10px;
  }

  &-right {
    min-width: 0;
    flex-shrink: 0;
    margin-left: 20px;
    display: flex;
    align-items: center;
  }
}

.avatar {
  width: 56px;
  height: 56px;
  overflow: hidden;
  box-shadow:3px 0px 3px rgba(7,0,2,0.14);
  border-radius: 28px;
  border-radius: 2px solid rgba(255,255,255,.5);
  background: #fff;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.more {
  font-size: 13px;
  white-space: nowrap;

  i {
    vertical-align: -1px;
    margin-left: 5px;
    font-size: 12px;
  }
}

.user-content {
  flex-grow: 1;
  // overflow: auto;
  background-color: #F3F6F8;
  
  /deep/ .van-cell-group {
    margin-bottom: 6px;
  }
  /deep/ .van-cell {
    line-height: 28px;
    color: #4C4C4C;
  }
  /deep/ .van-cell__left-icon {
    margin-right: 10px;
    position: relative;
    top: 2px;
  }
  /deep/ .van-cell__value span {
    position: relative;
    top: -2px;
    color: #479ED7;
  }
}

.contact {
  color: #737373;
  font-size: 12px;


  &-title {
    color: #4C4C4C;

    i {
      margin-right: 10px;
    }
  }

  p {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

</style>